<!DOCTYPE html>












  


<html class="theme-next pisces use-motion" lang="zh-CN">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">












  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=7.2.0">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=7.2.0">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=7.2.0">


  <link rel="mask-icon" href="/images/logo.svg?v=7.2.0" color="#222">






<link rel="stylesheet" href="/css/main.css?v=7.2.0">






<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css?v=4.7.0">






  
  
  <link rel="stylesheet" href="/lib/fancybox/source/jquery.fancybox.css">



<script id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '7.2.0',
    sidebar: {"position":"left","display":"post","offset":12,"onmobile":false},
    back2top: {"enable":true,"sidebar":false,"scrollpercent":true},
    copycode: {"enable":true,"show_result":true,"style":null},
    fancybox: true,
    mediumzoom: false,
    lazyload: false,
    pangu: false,
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    },
    localsearch: {"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},
    search: {
      root: '/',
      path: 'search.xml'
    },
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    translation: {
      copy_button: '复制',
      copy_success: '复制成功',
      copy_failure: '复制失败'
    }
  };
</script>

  <meta name="description" content="安装 npm  i  -g  typescript  开发辅助编译 ts为js文件1tsc xxxx.ts  在vscode中，自动编译ts12345tsc --init   // 生成配置文件out.dir :&apos;&apos;  // 修改tsconfig.js字段， js生成目录选择 -&amp;gt; 任务 -&amp;gt; 运行任务 -&amp;gt; 监视ts  变量 string             字符串 boo">
<meta property="og:type" content="article">
<meta property="og:title" content="typeScript">
<meta property="og:url" content="https://blog.youngzk.com/posts/9f19e967/index.html">
<meta property="og:site_name" content="Muniz Blog">
<meta property="og:description" content="安装 npm  i  -g  typescript  开发辅助编译 ts为js文件1tsc xxxx.ts  在vscode中，自动编译ts12345tsc --init   // 生成配置文件out.dir :&apos;&apos;  // 修改tsconfig.js字段， js生成目录选择 -&amp;gt; 任务 -&amp;gt; 运行任务 -&amp;gt; 监视ts  变量 string             字符串 boo">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2019-07-28T05:22:54.722Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="typeScript">
<meta name="twitter:description" content="安装 npm  i  -g  typescript  开发辅助编译 ts为js文件1tsc xxxx.ts  在vscode中，自动编译ts12345tsc --init   // 生成配置文件out.dir :&apos;&apos;  // 修改tsconfig.js字段， js生成目录选择 -&amp;gt; 任务 -&amp;gt; 运行任务 -&amp;gt; 监视ts  变量 string             字符串 boo">





  
  
  <link rel="canonical" href="https://blog.youngzk.com/posts/9f19e967/">



<script id="page.configurations">
  CONFIG.page = {
    sidebar: "",
  };
</script>

  
  <title>typeScript | Muniz Blog</title>
  






  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?502753d7b083822cd84ffc61132a5ac4";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>







  <noscript>
  <style>
  .use-motion .motion-element,
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-title { opacity: initial; }

  .use-motion .logo,
  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-CN">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Muniz Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
    
    
  </div>

  <div class="site-nav-toggle">
    <button aria-label="切换导航栏">
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>



<nav class="site-nav">
  
    <ul id="menu" class="menu">
      
        
        
        
          
          <li class="menu-item menu-item-home">

    
    
      
    

    

    <a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i> <br>首页</a>

  </li>
        
        
        
          
          <li class="menu-item menu-item-books">

    
    
      
    

    

    <a href="/books" rel="section"><i class="menu-item-icon fa fa-fw fa-question-circle"></i> <br>阅读</a>

  </li>
        
        
        
          
          <li class="menu-item menu-item-tags">

    
    
      
    

    

    <a href="/tags/" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i> <br>标签</a>

  </li>
        
        
        
          
          <li class="menu-item menu-item-categories">

    
    
      
    

    

    <a href="/categories/" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i> <br>分类</a>

  </li>
        
        
        
          
          <li class="menu-item menu-item-archives">

    
    
      
    

    

    <a href="/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i> <br>归档</a>

  </li>

      
      
        <li class="menu-item menu-item-search">
          <a href="javascript:;" class="popup-trigger">
          
            <i class="menu-item-icon fa fa-search fa-fw"></i> <br>搜索</a>
        </li>
      
    </ul>
  

  

  
    <div class="site-search">
      
  <div class="popup search-popup local-search-popup">
  <div class="local-search-header clearfix">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    <div class="local-search-input-wrapper">
      <input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
    </div>
  </div>
  <div id="local-search-result"></div>
</div>



    </div>
  
</nav>



</div>
    </header>

    


    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          
            

          
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
      

  
  
  

  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://blog.youngzk.com/posts/9f19e967/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="修心">
      <meta itemprop="description" content="修不被别人影响的心，修不被自己控制的心，修不被别人诱惑的心。">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Muniz Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">typeScript

              
            
          </h1>
        

        <div class="post-meta">

          
          
          

          
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              

              
                
              

              <time title="创建时间：2018-08-25 16:27:17" itemprop="dateCreated datePublished" datetime="2018-08-25T16:27:17+08:00">2018-08-25</time>
            </span>
          

          
            

            
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                
                  <span class="post-meta-item-text">更新于</span>
                
                <time title="修改时间：2019-07-28 13:22:54" itemprop="dateModified" datetime="2019-07-28T13:22:54+08:00">2019-07-28</time>
              </span>
            
          

          

          
          

          
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
                 阅读次数： 
                <span class="busuanzi-value" id="busuanzi_value_page_pv"></span>
              </span>
            </span>
          

          

          <br>
          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><blockquote>
<p>npm  i  -g  typescript</p>
</blockquote>
<h3 id="开发辅助"><a href="#开发辅助" class="headerlink" title="开发辅助"></a>开发辅助</h3><h4 id="编译-ts为js文件"><a href="#编译-ts为js文件" class="headerlink" title="编译 ts为js文件"></a>编译 ts为js文件</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">tsc xxxx.ts</span><br></pre></td></tr></table></figure>

<h4 id="在vscode中，自动编译ts"><a href="#在vscode中，自动编译ts" class="headerlink" title="在vscode中，自动编译ts"></a>在vscode中，自动编译ts</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">tsc --init   // 生成配置文件</span><br><span class="line"></span><br><span class="line">out.dir :<span class="string">''</span>  // 修改tsconfig.js字段， js生成目录</span><br><span class="line"></span><br><span class="line">选择 -&gt; 任务 -&gt; 运行任务 -&gt; 监视ts</span><br></pre></td></tr></table></figure>

<h3 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h3><ul>
<li>string             字符串</li>
<li>boolean            布尔</li>
<li>number            数值</li>
<li>Array | []         数组</li>
<li>[ 类型]           元组</li>
<li>enum                枚举</li>
</ul>
<a id="more"></a>

<ul>
<li>any                任意类型</li>
<li>undefined            未知-未定义</li>
<li>null                空</li>
<li>never             不会出现的值，包含 null 和 nudefined</li>
</ul>
<h3 id="特性"><a href="#特性" class="headerlink" title="特性"></a>特性</h3><ul>
<li>类的 抽象 接口 多态 泛型</li>
<li>函数 接口 泛型 传参 可省略参数  匿名函数 定义</li>
</ul>
<blockquote>
<p>如果有面向对象的后台开发语言基础 如：Java 理解起来更快</p>
</blockquote>
<h3 id="简明代码"><a href="#简明代码" class="headerlink" title="简明代码"></a>简明代码</h3><h4 id="变量的定义"><a href="#变量的定义" class="headerlink" title="变量的定义"></a>变量的定义</h4><h5 id="string字符串类型"><a href="#string字符串类型" class="headerlink" title="string字符串类型"></a>string字符串类型</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str:string = <span class="string">"你好"</span>;</span><br></pre></td></tr></table></figure>

<h5 id="boolean布尔类型"><a href="#boolean布尔类型" class="headerlink" title="boolean布尔类型"></a>boolean布尔类型</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> flag:boolean= <span class="literal">true</span>;</span><br></pre></td></tr></table></figure>

<h5 id="Number数值类型"><a href="#Number数值类型" class="headerlink" title="Number数值类型"></a>Number数值类型</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> num:number = <span class="number">123</span>;</span><br></pre></td></tr></table></figure>

<h5 id="Array数组类型"><a href="#Array数组类型" class="headerlink" title="Array数组类型"></a>Array数组类型</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr:number[]=[<span class="number">11</span>,<span class="number">22</span>,<span class="number">33</span>]</span><br><span class="line"><span class="keyword">var</span> arr1:<span class="built_in">Array</span>&lt;number&gt;=[<span class="number">11</span>,<span class="number">22</span>,<span class="number">33</span>];</span><br></pre></td></tr></table></figure>

<h5 id="元组类型"><a href="#元组类型" class="headerlink" title="[]元组类型"></a>[]元组类型</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr2:[number,string]=[<span class="number">123</span>,<span class="string">'234'</span>];</span><br></pre></td></tr></table></figure>

<h5 id="enum枚举类型"><a href="#enum枚举类型" class="headerlink" title="enum枚举类型"></a>enum枚举类型</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">enum COLOR &#123;</span><br><span class="line">    blue=<span class="number">123</span>, red=<span class="number">456</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 如果 没有给枚举定义的变量 复制，就是返回下标。否则返回值</span></span><br><span class="line"><span class="keyword">let</span> myColor:COLOR = COLOR.blue;</span><br><span class="line"><span class="built_in">console</span>.log(myColor)</span><br></pre></td></tr></table></figure>

<h5 id="any任意类型"><a href="#any任意类型" class="headerlink" title="any任意类型"></a>any任意类型</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> numx:any = <span class="number">123</span>;</span><br><span class="line">numx=<span class="string">'222'</span>;</span><br></pre></td></tr></table></figure>

<h5 id="null-undefined类型"><a href="#null-undefined类型" class="headerlink" title="null-undefined类型"></a>null-undefined类型</h5><blockquote>
<p>其它数据类型的子类型</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> nums:number|<span class="literal">undefined</span>;</span><br><span class="line"><span class="built_in">console</span>.log(nums);</span><br><span class="line">nums=<span class="number">12</span>;</span><br><span class="line"><span class="built_in">console</span>.log(nums);</span><br></pre></td></tr></table></figure>

<h5 id="void类型"><a href="#void类型" class="headerlink" title="void类型"></a>void类型</h5><blockquote>
<p>没有任何类型 , 一般 用于 方法返回</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">setAge</span>(<span class="params"></span>):<span class="title">void</span> </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line">&#125;</span><br><span class="line">setAge();</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">setAges</span>(<span class="params"></span>):<span class="title">number</span> </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line">    <span class="keyword">return</span> <span class="number">1211</span>;</span><br><span class="line">&#125;</span><br><span class="line">setAge();</span><br><span class="line"><span class="built_in">console</span>.log(setAges());</span><br></pre></td></tr></table></figure>

<h5 id="never类型"><a href="#never类型" class="headerlink" title="never类型"></a>never类型</h5><blockquote>
<p>包括null和 undefined ，表示不会出现的值</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> a:never;</span><br><span class="line">a=<span class="function">(<span class="params">(</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'错误'</span>);</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>

<h4 id="函数的定义"><a href="#函数的定义" class="headerlink" title="函数的定义"></a>函数的定义</h4><h5 id="匿名函数"><a href="#匿名函数" class="headerlink" title="匿名函数"></a>匿名函数</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> func1 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>):<span class="title">string</span></span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">'123'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func2</span>(<span class="params"></span>):<span class="title">boolean</span></span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="传参"><a href="#传参" class="headerlink" title="传参"></a>传参</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getinfo</span>(<span class="params">name:string, age: number</span>):<span class="title">string</span></span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`我是<span class="subst">$&#123;name&#125;</span>,年龄<span class="subst">$&#123;age&#125;</span>`</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(getinfo(<span class="string">'李三'</span>,<span class="number">20</span>));</span><br></pre></td></tr></table></figure>

<h5 id="无返回值"><a href="#无返回值" class="headerlink" title="无返回值"></a>无返回值</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func3</span>(<span class="params"></span>):<span class="title">void</span></span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'没返回值'</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="可选参数"><a href="#可选参数" class="headerlink" title="可选参数"></a>可选参数</h5><blockquote>
<p> 如 使用?修饰 如 age?:number</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getinfos</span>(<span class="params">name:string, age?:number</span>):<span class="title">string</span></span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(age)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">`我是<span class="subst">$&#123;name&#125;</span>,年龄<span class="subst">$&#123;age&#125;</span>`</span>;</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">`我是<span class="subst">$&#123;name&#125;</span>,年龄保密`</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(getinfos(<span class="string">'李四'</span>));</span><br><span class="line"><span class="built_in">console</span>.log(getinfos(<span class="string">'李四'</span>,<span class="number">42</span>));</span><br></pre></td></tr></table></figure>

<h5 id="默认参数"><a href="#默认参数" class="headerlink" title="默认参数"></a>默认参数</h5><blockquote>
<p> 如 age:number=18</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getAge</span>(<span class="params">age:number=<span class="number">18</span></span>):<span class="title">number</span></span>&#123;</span><br><span class="line">    <span class="keyword">return</span> age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">`我的年龄是<span class="subst">$&#123;getAge()&#125;</span>`</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">`我的年龄是<span class="subst">$&#123;getAge(<span class="number">33</span>)&#125;</span>`</span>);</span><br></pre></td></tr></table></figure>

<h5 id="剩余参数"><a href="#剩余参数" class="headerlink" title="剩余参数"></a>剩余参数</h5><blockquote>
<p>如 …arrAy</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">...result:number[]</span>):<span class="title">number</span></span>&#123;</span><br><span class="line">    <span class="keyword">let</span> sum:number = <span class="number">0</span>;</span><br><span class="line">    result.forEach(<span class="function"><span class="params">ele</span> =&gt;</span> &#123;</span><br><span class="line">        sum+=ele;</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> sum;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>));</span><br></pre></td></tr></table></figure>

<h5 id="函数重载"><a href="#函数重载" class="headerlink" title="函数重载"></a>函数重载</h5><blockquote>
<p>extends super</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params">name:string</span>):<span class="title">string</span>;</span></span><br><span class="line"><span class="function"><span class="title">function</span> <span class="title">getName</span>(<span class="params">age:number</span>):<span class="title">number</span>;</span></span><br><span class="line"><span class="function"><span class="title">function</span> <span class="title">getName</span>(<span class="params">str:any</span>):<span class="title">any</span></span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">typeof</span> str === <span class="string">'string'</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'我叫'</span>+str;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'我的年龄是'</span>+str;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(getName(<span class="string">'王老五'</span>));</span><br><span class="line"><span class="built_in">console</span>.log(getName(<span class="number">23</span>));</span><br></pre></td></tr></table></figure>

<h4 id="类的定义"><a href="#类的定义" class="headerlink" title="类的定义"></a>类的定义</h4><blockquote>
<p>extends super</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// 类的定义</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Person</span></span>&#123;</span><br><span class="line">    name:string; <span class="comment">//属性 省略了public 关键词</span></span><br><span class="line">    private salary:number=<span class="number">10000</span>;</span><br><span class="line">    protected children:number = <span class="number">2</span>;</span><br><span class="line">    <span class="keyword">constructor</span>(name:string)&#123; <span class="comment">// 构造函数， 实例化的时候触发的方法</span></span><br><span class="line">        <span class="keyword">this</span>.name = name;</span><br><span class="line">    &#125;</span><br><span class="line">    run():<span class="keyword">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.name,<span class="string">'工资：'</span>+<span class="keyword">this</span>.salary,<span class="string">'有'</span>+<span class="keyword">this</span>.children+<span class="string">'个孩子'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    getName():string&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.name;</span><br><span class="line">    &#125;</span><br><span class="line">    setName(name:string):<span class="keyword">void</span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.name = name;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> person:Person = <span class="keyword">new</span> Person(<span class="string">'小明'</span>);</span><br><span class="line">person.run();</span><br><span class="line">person.setName(<span class="string">'李四'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'我的名字是：'</span>+person.getName());</span><br></pre></td></tr></table></figure>

<h5 id="类的继承"><a href="#类的继承" class="headerlink" title="类的继承"></a>类的继承</h5><blockquote>
<p>extends super</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">WoMan</span> <span class="keyword">extends</span> <span class="title">Person</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>()&#123;</span><br><span class="line">        <span class="keyword">super</span>(<span class="string">'女人'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> woMan:Person = <span class="keyword">new</span> WoMan();</span><br><span class="line">woMan.run();</span><br><span class="line">woMan.setName(<span class="string">'女人们'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(woMan.getName());</span><br></pre></td></tr></table></figure>

<h5 id="类的修饰符"><a href="#类的修饰符" class="headerlink" title="类的修饰符"></a>类的修饰符</h5><blockquote>
<p>public:     公有      在声明的类里面、继承声明的子类、调用类的实力化对象都可以访问<br>protected:  保护类型   在声明的类里面、继承声明的子类可以访问，调用类的实力化对象没法访问<br>private:    私有       在声明的类里面可以访问，继承声明的子类可以访问，调用类的实力化对象不可以访问</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">    </span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Man</span> <span class="keyword">extends</span> <span class="title">Person</span></span>&#123;</span><br><span class="line">    private smoke:boolean=<span class="literal">true</span>;</span><br><span class="line">    <span class="keyword">constructor</span>()&#123;</span><br><span class="line">        <span class="keyword">super</span>(<span class="string">'男人'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    run():<span class="keyword">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">`这个<span class="subst">$&#123;<span class="keyword">this</span>.name&#125;</span> <span class="subst">$&#123;<span class="keyword">this</span>.smoke ? <span class="string">'吸烟'</span> : <span class="string">'不吸烟'</span>&#125;</span>`</span>);</span><br><span class="line"></span><br><span class="line">        <span class="comment">// console.log(`这个$&#123;this.name&#125;的工资$&#123;this.salary&#125;`);</span></span><br><span class="line">        <span class="comment">// -- 提示 private修饰的salary 属性 只能在 Person 声明属性的类中访问</span></span><br><span class="line"></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">`这个<span class="subst">$&#123;<span class="keyword">this</span>.name&#125;</span>有<span class="subst">$&#123;<span class="keyword">this</span>.children&#125;</span>个孩子`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> man:Person = <span class="keyword">new</span> Man();</span><br><span class="line">man.run();</span><br><span class="line">man.setName(<span class="string">'男人们'</span>);</span><br><span class="line"><span class="comment">// console.log(`这个$&#123;man.name&#125;有$&#123;man.children&#125;个孩子`);</span></span><br><span class="line"><span class="comment">// -- 提示 protected修饰的 children 属性 只能在 声明属性的类及子类内部访问</span></span><br><span class="line"><span class="built_in">console</span>.log(man.getName());</span><br></pre></td></tr></table></figure>

<h5 id="静态方法及属性"><a href="#静态方法及属性" class="headerlink" title="静态方法及属性"></a>静态方法及属性</h5><blockquote>
<p>私有方法不可以访问 静态的方法书静态属性<br>静态方法也不可以访问 私有的方法和私有的属性</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dog</span> </span>&#123;</span><br><span class="line">    name:string = <span class="string">'哮天犬'</span>;</span><br><span class="line">    <span class="keyword">static</span> work:string = <span class="string">'看门'</span>;</span><br><span class="line">    <span class="keyword">constructor</span>()&#123;&#125;</span><br><span class="line">    eat(food:string):string&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;<span class="keyword">this</span>.name&#125;</span>吃<span class="subst">$&#123;food&#125;</span>`</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">static</span> sleep():<span class="keyword">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'狗睡觉'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> dog = <span class="keyword">new</span> Dog();</span><br><span class="line"><span class="built_in">console</span>.log(dog.eat(<span class="string">'骨头'</span>));</span><br><span class="line">Dog.sleep();</span><br><span class="line"><span class="built_in">console</span>.log(dog.name+Dog.work);</span><br></pre></td></tr></table></figure>

<h5 id="多态"><a href="#多态" class="headerlink" title="多态"></a>多态</h5><blockquote>
<p> 多态：定义方法不去实现，让继承类去实现方法体</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Animal</span> </span>&#123;</span><br><span class="line">    name:string;</span><br><span class="line">    <span class="keyword">constructor</span>(name:string)&#123;</span><br><span class="line">        <span class="keyword">this</span>.name=name;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 定义方法不去实现，让继承类去实现方法体</span></span><br><span class="line">    eat(food:string):<span class="keyword">void</span>&#123;&#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Cat</span> <span class="keyword">extends</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(name:string)&#123;</span><br><span class="line">        <span class="keyword">super</span>(name);</span><br><span class="line">    &#125;</span><br><span class="line">    eat(food:string):<span class="keyword">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;<span class="keyword">this</span>.name&#125;</span>吃<span class="subst">$&#123;food&#125;</span>`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> cat:Cat = <span class="keyword">new</span> Cat(<span class="string">'🐱猫 '</span>);</span><br><span class="line">cat.eat(<span class="string">'老鼠'</span>);</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Snake</span> <span class="keyword">extends</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(name:string)&#123;</span><br><span class="line">        <span class="keyword">super</span>(name);</span><br><span class="line">    &#125;</span><br><span class="line">    eat(food:string):<span class="keyword">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;<span class="keyword">this</span>.name&#125;</span>吃<span class="subst">$&#123;food&#125;</span>`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> snake:Snake = <span class="keyword">new</span> Snake(<span class="string">'🐍蛇 '</span>);</span><br><span class="line">snake.eat(<span class="string">'青蛙'</span>);</span><br></pre></td></tr></table></figure>

<h5 id="抽象类"><a href="#抽象类" class="headerlink" title="抽象类"></a>抽象类</h5><blockquote>
<p>abstract 修饰<br>抽象：要求该抽象类的子类(派生类)必须实现抽象方法，反之多态却可以不实现</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">abstract <span class="class"><span class="keyword">class</span> <span class="title">Food</span> </span>&#123;</span><br><span class="line">    abstract saff(food:string):boolean;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Tomato</span> <span class="keyword">extends</span> <span class="title">Food</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>()&#123;</span><br><span class="line">        <span class="keyword">super</span>();</span><br><span class="line">    &#125;</span><br><span class="line">    saff(food:string):boolean&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> tomato:Food= <span class="keyword">new</span> Tomato();</span><br><span class="line"><span class="built_in">console</span>.log(tomato.saff(<span class="string">'西红柿'</span>)?<span class="string">'西红柿是安全食物'</span>:<span class="string">'西红柿不是安全食物'</span>);</span><br></pre></td></tr></table></figure>

<h4 id="接口的定义"><a href="#接口的定义" class="headerlink" title="接口的定义"></a>接口的定义</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">interface FullName&#123;</span><br><span class="line">    firstname:string;</span><br><span class="line">    lastName:string;</span><br><span class="line">    secoundName?:string;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getNames</span>(<span class="params">name:FullName</span>):<span class="title">void</span></span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(name);</span><br><span class="line">&#125;</span><br><span class="line">getNames(&#123;</span><br><span class="line">    firstname: <span class="string">'李'</span>,</span><br><span class="line">    lastName: <span class="string">'四'</span></span><br><span class="line">&#125;)</span><br><span class="line">getNames(&#123;</span><br><span class="line">    firstname: <span class="string">'李'</span>,</span><br><span class="line">    lastName: <span class="string">'四'</span>,</span><br><span class="line">    secoundName: <span class="string">'外号-人称刀疤李四'</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h5 id="案例-ajax-接口封装"><a href="#案例-ajax-接口封装" class="headerlink" title="案例 ajax 接口封装"></a>案例 ajax 接口封装</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">interface Config&#123;</span><br><span class="line">    method: string;</span><br><span class="line">    url:string;</span><br><span class="line">    data?:string;</span><br><span class="line">    dataType:string;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ajax</span>(<span class="params">config:Config</span>):<span class="title">any</span></span>&#123;</span><br><span class="line">    <span class="keyword">let</span> xhr = <span class="keyword">new</span> XMLHttpRequest();</span><br><span class="line">    xhr.open(config.method,config.url, <span class="literal">true</span>);</span><br><span class="line">    xhr.send(config.data);</span><br><span class="line">    xhr.onreadystatechange=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">if</span>(xhr.readyState == <span class="number">4</span> &amp;&amp; xhr.status == <span class="number">200</span>)&#123;</span><br><span class="line">            <span class="keyword">if</span>(config.dataType == <span class="string">'json'</span>)&#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="built_in">JSON</span>.parse(xhr.responseText);</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                <span class="keyword">return</span> xhr.responseText;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">ajax(&#123;</span><br><span class="line">    method: <span class="string">'GET'</span>,</span><br><span class="line">    url: <span class="string">'https://blog.youngzk.com'</span>,</span><br><span class="line">    dataType:<span class="string">'text'</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h5 id="函数类型接口"><a href="#函数类型接口" class="headerlink" title="函数类型接口"></a>函数类型接口</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">interface Maths &#123;</span><br><span class="line">    (a:number,<span class="attr">b</span>:number):number;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> sums:Maths = <span class="function"><span class="keyword">function</span>(<span class="params">as:number,bs:number</span>):<span class="title">number</span></span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">as</span>+bs;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(sums(<span class="number">1</span>,<span class="number">2</span>));</span><br></pre></td></tr></table></figure>

<h5 id="可索引接口"><a href="#可索引接口" class="headerlink" title="可索引接口"></a>可索引接口</h5><blockquote>
<p>数组 对象的约束</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">interface Arr &#123;</span><br><span class="line">    [index:number]:string;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> array:Arr[]=[<span class="string">'111'</span>,<span class="string">'222'</span>];</span><br><span class="line"></span><br><span class="line">interface Obj &#123;</span><br><span class="line">    [index:string]:string;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> array1:Obj=&#123;</span><br><span class="line">    name:<span class="string">'张三'</span>,</span><br><span class="line">    <span class="comment">// age: 12   错误 ，只能是字符串</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="类的类型接口"><a href="#类的类型接口" class="headerlink" title="类的类型接口"></a>类的类型接口</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">interface Tiger &#123;</span><br><span class="line">    name:string</span><br><span class="line">    eat(food:string):<span class="keyword">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">SmallTiger</span> <span class="title">implements</span> <span class="title">Tiger</span></span>&#123;</span><br><span class="line">    name: string;</span><br><span class="line">    <span class="keyword">constructor</span>(name:string)&#123;</span><br><span class="line">        <span class="keyword">this</span>.name=name;</span><br><span class="line">    &#125;</span><br><span class="line">    eat(food:string):<span class="keyword">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;<span class="keyword">this</span>.name&#125;</span>吃<span class="subst">$&#123;food&#125;</span>`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> smallTiger:Tiger = <span class="keyword">new</span> SmallTiger(<span class="string">'小脑虎'</span>);</span><br><span class="line">smallTiger.eat(<span class="string">'肉'</span>);</span><br></pre></td></tr></table></figure>

<h5 id="接口的继承"><a href="#接口的继承" class="headerlink" title="接口的继承"></a>接口的继承</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">interface Fruits&#123;</span><br><span class="line">    has():<span class="keyword">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">interface Appale extends Fruits&#123;</span><br><span class="line">    getColor():string;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">RedApp</span> <span class="title">implements</span> <span class="title">Appale</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>()&#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">    has():<span class="keyword">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'红苹果是水果'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    getColor():string&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'红苹果是红色的'</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> redApp:RedApp = <span class="keyword">new</span> RedApp();</span><br><span class="line">redApp.has();</span><br><span class="line"><span class="built_in">console</span>.log(redApp.getColor());</span><br></pre></td></tr></table></figure>

<h4 id="泛型的定义"><a href="#泛型的定义" class="headerlink" title="泛型的定义"></a>泛型的定义</h4><blockquote>
<p>泛型<br>功能，提高复用性以及对不确定的数据类型</p>
</blockquote>
<h5 id="泛型函数"><a href="#泛型函数" class="headerlink" title="泛型函数"></a>泛型函数</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getData</span>&lt;<span class="title">T</span>&gt;(<span class="params">value:T</span>):<span class="title">T</span></span>&#123;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(getData&lt;string&gt;(<span class="string">'wwww'</span>));</span><br><span class="line"><span class="built_in">console</span>.log(getData&lt;number&gt;(<span class="number">12433</span>));</span><br></pre></td></tr></table></figure>

<h5 id="泛型类"><a href="#泛型类" class="headerlink" title="泛型类"></a>泛型类</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MinClass</span>&lt;<span class="title">T</span>&gt;</span>&#123;</span><br><span class="line">    list:T[]=[];</span><br><span class="line">    add(num:T):<span class="keyword">void</span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.list.push(num);</span><br><span class="line">    &#125;</span><br><span class="line">    toString():string&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.list.join();</span><br><span class="line">    &#125;</span><br><span class="line">    getFirstChild():T&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.list[<span class="number">0</span>];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> min:MinClass&lt;number&gt; = <span class="keyword">new</span> MinClass&lt;number&gt;();</span><br><span class="line">min.add(<span class="number">1</span>);</span><br><span class="line">min.add(<span class="number">5</span>);</span><br><span class="line">min.add(<span class="number">1</span>);</span><br><span class="line">min.add(<span class="number">-3</span>);</span><br><span class="line">min.add(<span class="number">9</span>);</span><br><span class="line">min.add(<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(min.getFirstChild());</span><br><span class="line"><span class="built_in">console</span>.log(min.toString());</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> min1:MinClass&lt;string&gt; = <span class="keyword">new</span> MinClass&lt;string&gt;();</span><br><span class="line">min1.add(<span class="string">'a'</span>);</span><br><span class="line">min1.add(<span class="string">'b'</span>);</span><br><span class="line">min1.add(<span class="string">'c'</span>);</span><br><span class="line">min1.add(<span class="string">'d'</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(min1.getFirstChild());</span><br><span class="line"><span class="built_in">console</span>.log(min1.toString());</span><br></pre></td></tr></table></figure>

<h5 id="泛型函数接口"><a href="#泛型函数接口" class="headerlink" title="泛型函数接口"></a>泛型函数接口</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">interface ConfigFnc &#123;</span><br><span class="line">    &lt;T&gt;(value:T):T;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> getAges:ConfigFnc = <span class="function"><span class="keyword">function</span>&lt;<span class="title">T</span>&gt;(<span class="params">value:T</span>):<span class="title">T</span></span>&#123;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(getAges(<span class="number">1</span>));</span><br><span class="line"><span class="built_in">console</span>.log(getAges(<span class="string">'asd'</span>));</span><br><span class="line"></span><br><span class="line">interface ConfigFnc1&lt;T&gt; &#123;</span><br><span class="line">    (value:T):T;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> getAges1:ConfigFnc1&lt;number&gt; = <span class="function"><span class="keyword">function</span>&lt;<span class="title">T</span>&gt;(<span class="params">value:T</span>):<span class="title">T</span></span>&#123;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(getAges1(<span class="number">1</span>));</span><br></pre></td></tr></table></figure>
      
    </div>

    
      


    

    
      
    

    
    
    

    

    
      
    
    

    
      <div>
        




  



<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>修心</li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    
    <a href="https://blog.youngzk.com/posts/9f19e967/" title="typeScript">https://blog.youngzk.com/posts/9f19e967/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/zh-CN" rel="noopener" target="_blank"><i class="fa fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！</li>
</ul>

      </div>
    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/posts/88e91fb0/" rel="next" title="虎事小程序">
                <i class="fa fa-chevron-left"></i> 虎事小程序
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/posts/cf777cb3/" rel="prev" title="node-dll 调用">
                node-dll 调用 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>

  </div>


          </div>
          
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-overview">

          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  
    <a href="/">
      <img class="site-author-image" itemprop="image" src="/images/avatar.jpg" alt="修心">
      </a>
  
  <p class="site-author-name" itemprop="name">修心</p>
  <div class="site-description motion-element" itemprop="description">修不被别人影响的心，修不被自己控制的心，修不被别人诱惑的心。</div>
</div>


  <nav class="site-state motion-element">
    
      <div class="site-state-item site-state-posts">
        
          <a href="/archives/">
        
          <span class="site-state-item-count">17</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
    

    
      
      
      <div class="site-state-item site-state-categories">
        
          
            <a href="/categories/">
          
        
        
        
          
        
          
        
          
        
        <span class="site-state-item-count">3</span>
        <span class="site-state-item-name">分类</span>
        </a>
      </div>
    

    
      
      
      <div class="site-state-item site-state-tags">
        
          
            <a href="/tags/">
          
        
        
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
        <span class="site-state-item-count">20</span>
        <span class="site-state-item-name">标签</span>
        </a>
      </div>
    
  </nav>







  <div class="links-of-author motion-element">
    
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="https://github.com/1160007652" title="GitHub &rarr; https://github.com/1160007652" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i>GitHub</a>
      </span>
    
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="mailto:1160007652@qq.com" title="E-Mail &rarr; mailto:1160007652@qq.com" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i>E-Mail</a>
      </span>
    
  </div>



  <div class="cc-license motion-element" itemprop="license">
  
  
    
  
  
  
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/zh-CN" class="cc-opacity" rel="noopener" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>





          
          
        </div>
      </div>

      
      <!--noindex-->
        <div class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
            
            
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#安装"><span class="nav-number">1.</span> <span class="nav-text">安装</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#开发辅助"><span class="nav-number">2.</span> <span class="nav-text">开发辅助</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#编译-ts为js文件"><span class="nav-number">2.1.</span> <span class="nav-text">编译 ts为js文件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#在vscode中，自动编译ts"><span class="nav-number">2.2.</span> <span class="nav-text">在vscode中，自动编译ts</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#变量"><span class="nav-number">3.</span> <span class="nav-text">变量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#特性"><span class="nav-number">4.</span> <span class="nav-text">特性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#简明代码"><span class="nav-number">5.</span> <span class="nav-text">简明代码</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#变量的定义"><span class="nav-number">5.1.</span> <span class="nav-text">变量的定义</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#string字符串类型"><span class="nav-number">5.1.1.</span> <span class="nav-text">string字符串类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#boolean布尔类型"><span class="nav-number">5.1.2.</span> <span class="nav-text">boolean布尔类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Number数值类型"><span class="nav-number">5.1.3.</span> <span class="nav-text">Number数值类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Array数组类型"><span class="nav-number">5.1.4.</span> <span class="nav-text">Array数组类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#元组类型"><span class="nav-number">5.1.5.</span> <span class="nav-text">[]元组类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#enum枚举类型"><span class="nav-number">5.1.6.</span> <span class="nav-text">enum枚举类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#any任意类型"><span class="nav-number">5.1.7.</span> <span class="nav-text">any任意类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#null-undefined类型"><span class="nav-number">5.1.8.</span> <span class="nav-text">null-undefined类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#void类型"><span class="nav-number">5.1.9.</span> <span class="nav-text">void类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#never类型"><span class="nav-number">5.1.10.</span> <span class="nav-text">never类型</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#函数的定义"><span class="nav-number">5.2.</span> <span class="nav-text">函数的定义</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#匿名函数"><span class="nav-number">5.2.1.</span> <span class="nav-text">匿名函数</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#传参"><span class="nav-number">5.2.2.</span> <span class="nav-text">传参</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#无返回值"><span class="nav-number">5.2.3.</span> <span class="nav-text">无返回值</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#可选参数"><span class="nav-number">5.2.4.</span> <span class="nav-text">可选参数</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#默认参数"><span class="nav-number">5.2.5.</span> <span class="nav-text">默认参数</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#剩余参数"><span class="nav-number">5.2.6.</span> <span class="nav-text">剩余参数</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#函数重载"><span class="nav-number">5.2.7.</span> <span class="nav-text">函数重载</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#类的定义"><span class="nav-number">5.3.</span> <span class="nav-text">类的定义</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#类的继承"><span class="nav-number">5.3.1.</span> <span class="nav-text">类的继承</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#类的修饰符"><span class="nav-number">5.3.2.</span> <span class="nav-text">类的修饰符</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#静态方法及属性"><span class="nav-number">5.3.3.</span> <span class="nav-text">静态方法及属性</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#多态"><span class="nav-number">5.3.4.</span> <span class="nav-text">多态</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#抽象类"><span class="nav-number">5.3.5.</span> <span class="nav-text">抽象类</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#接口的定义"><span class="nav-number">5.4.</span> <span class="nav-text">接口的定义</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#案例-ajax-接口封装"><span class="nav-number">5.4.1.</span> <span class="nav-text">案例 ajax 接口封装</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#函数类型接口"><span class="nav-number">5.4.2.</span> <span class="nav-text">函数类型接口</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#可索引接口"><span class="nav-number">5.4.3.</span> <span class="nav-text">可索引接口</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#类的类型接口"><span class="nav-number">5.4.4.</span> <span class="nav-text">类的类型接口</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#接口的继承"><span class="nav-number">5.4.5.</span> <span class="nav-text">接口的继承</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#泛型的定义"><span class="nav-number">5.5.</span> <span class="nav-text">泛型的定义</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#泛型函数"><span class="nav-number">5.5.1.</span> <span class="nav-text">泛型函数</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#泛型类"><span class="nav-number">5.5.2.</span> <span class="nav-text">泛型类</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#泛型函数接口"><span class="nav-number">5.5.3.</span> <span class="nav-text">泛型函数接口</span></a></li></ol></li></ol></li></ol></div>
            

          </div>
        </div>
      <!--/noindex-->
      

      

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2018 – <span itemprop="copyrightYear">2019</span>
  <span class="with-love" id="animate">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">修心</span>

  

  
</div>

<div>
  修不被别人影响的心，修不被自己控制的心，修不被别人诱惑的心。
</div>









        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  
    <span class="post-meta-item-icon">
      <i class="fa fa-user"></i>
    </span>
    <span class="site-uv" title="总访客量">
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
    </span>
  

  
    <span class="post-meta-divider">|</span>
  

  
    <span class="post-meta-item-icon">
      <i class="fa fa-eye"></i>
    </span>
    <span class="site-pv" title="总访问量">
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
    </span>
  
</div>









        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
          <span id="scrollpercent"><span>0</span>%</span>
        
      </div>
    

    

    

    

  </div>

  

<script>
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>






  











  
  









  
  <script src="/lib/jquery/index.js?v=3.4.1"></script>

  
  <script src="/lib/fancybox/source/jquery.fancybox.pack.js"></script>

  
  <script src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>




  <script src="/js/utils.js?v=7.2.0"></script>

  <script src="/js/motion.js?v=7.2.0"></script>



  
  


  <script src="/js/affix.js?v=7.2.0"></script>

  <script src="/js/schemes/pisces.js?v=7.2.0"></script>



  
  <script src="/js/scrollspy.js?v=7.2.0"></script>
<script src="/js/post-details.js?v=7.2.0"></script>



  <script src="/js/next-boot.js?v=7.2.0"></script>

  

  

  


  













  <script src="/js/local-search.js?v=7.2.0"></script>












<script>
// GET RESPONSIVE HEIGHT PASSED FROM IFRAME

window.addEventListener("message", function(e) {
  var data = e.data;
  if ((typeof data === 'string') && (data.indexOf('ciu_embed') > -1)) {
    var featureID = data.split(':')[1];
    var height = data.split(':')[2];
    $(`iframe[data-feature=${featureID}]`).height(parseInt(height) + 30);
  }
}, false);
</script>








  

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/hijiki.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
</html>
